<template>
<!-- 使用递归组件完成树形菜单 -->
	<div class="menu-box">
		<a-menu>
			<template v-for="(item, i) in list">
				<a-menu-item  v-if="!item.children" :key="i">{{item.title}}</a-menu-item>
                <recursion-menu v-else :key="i" :list="item" :i="i"></recursion-menu>
			</template>
		</a-menu>
	</div>
</template>

<script>
import AMenu from "_c/menu/a-menu";
import AMenuItem from "_c/menu/a-menu-item";
import ASubmenu from "_c/menu/a-submenu";
import RecursionMenu from '_c/menu/recursion-menu.vue';
export default {
	name: "menu-page",
	components: { AMenu, AMenuItem, ASubmenu, RecursionMenu},
	data() {
		return {
			list: [
				{
					title: '1111',
				},
				{
					title: '2222',
				},
				{
					title: '3333',
					children: [
						{
							title: '3333-111',
						},
						{
							title: '3333-222',
							children: [
								{
									title: '3333-222-11',
								},
								{
									title: '3333-222-22',
                                    children:[
                                        {
                                            title: '3333-222-22-11'
                                        }
                                    ]
								},
							],
						},
					],
				},
			],
		};
	},
	mounted() {},
	methods: {},
};
</script>

<style lang="less" scoped>
.menu-box {
	width: 300px;
	list-style: none;
	background-color: cadetblue;
	text-align: left;
	ul {
		box-sizing: border-box;
	}
}
</style>